<template>
	<view class="template-about tn-safe-area-inset-bottom">
		<view class="top-backgroup">
			<image src="../../../static/summer.jpg" mode='widthFix' class='backgroud-image'>
			</image>
		</view>

		<view class="dong" @click="tn('/pages/my/member')">
			<view class="monster">
				<view class="monster__face">
					<view class="monster__eye avatar-eye avatar-eye--green eye--left">
						<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span
									class="avatar-eye-pupil-lightReflection"></span></span></view>
					</view>
					<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
						<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span
									class="avatar-eye-pupil-lightReflection"></span></span></view>
					</view>
					<view class="monster__noses">
						<view class="monster__nose"></view>
						<view class="monster__nose"></view>
					</view>
					<view class="monster__mouth">
						<view class="monster__top"></view>
						<view class="monster__bottom"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="tnwave waveAnimation">
			<view class="waveWrapperInner bgTop">
				<view class="wave waveTop"
					style="background-image: url('data:')">
				</view>
			</view>
			<view class="waveWrapperInner bgMiddle">
				<view class="wave waveMiddle"
					style="background-image: url('data:')">
				</view>
			</view>
			<view class="waveWrapperInner bgBottom">
				<view class="wave waveBottom"
					style="background-image: url('data:')">
				</view>
			</view>
		</view>

		<view class="about__wrap">
			<!-- 头像用户信息 -->
			<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
				@click="openAuthorizationModal">
				<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
					<image class="tn-shadow-blur" :src="user.avatar ? user.avatar : '../../../static/header.jpg'"
						style="width: 170rpx;height: 170rpx;background-size: cover;">
					</image>
				</view>
				<view class="user-info__nick-name">
					{{user.nickname ? user.nickname : '点击授权'}}
				</view>
			</view>



			<!-- 消息&数据 -->
			<view class="tn-shadow-warp" style="margin-top: 100rpx;background-color: rgba(255,255,255,1);">
				<view class="tn-flex">
					<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="">
								<view class="tn-text-xxl tn-color-orange">{{user.openNum || 0}}</view>
							</view>
							<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
								<text class="tn-icon-fire"></text>
								<text class="tn-padding-left-xs">对话次数</text>
							</view>
						</view>
					</view>
					<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="">
								<view class="tn-text-xxl tn-color-blue">{{user.number || 0}}</view>
							</view>
							<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
								<text class="tn-icon-reload-planet-fill"></text>
								<text class="tn-padding-left-xs">剩余积分</text>
							</view>
						</view>
					</view>
					<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="">
								<view class="tn-text-xxl tn-color-red">{{user.broadNumber || 0}}</view>
							</view>
							<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
								<text class="tn-icon-pyramid"></text>
								<text class="tn-padding-left-xs">广告积分</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 更多信息-->
			<view
				class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
				<!-- 方式12 start-->
				<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="show">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-caring" style="color: #080808;"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">我的团队</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/pages/my/integral')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-ticket" style="color: #080808;"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">积分明细</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="show">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-calendar" style="color: #080808;"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">攒积分</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="show">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
								<view class="tn-icon-order" style="color: #080808;"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">历史订单</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 方式12 end-->
			</view>

			<!-- 更多信息-->
			<view
				class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center" @click="openLandscape">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
							<view class="tn-icon-like-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">赞赏作者</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center" @click="inputDialog">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
							<view class="tn-icon-like-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">卡密兑换</view>
					</view>
				</tn-list-cell>
			</view>

			<!-- 更多信息-->
			<view
				class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center" @click="copyDCloud('2413024177')">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white">
							<view class="tn-icon-wechat-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">合作勾搭(微信)</view>
						<view class="tn-margin-left-sm tn-color-cyan tn-icon-link">2413024177</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white">
							<view class="tn-icon-comment-fill"></view>
						</view>
						<view class="tn-margin-left-sm">问题反馈</view>
					</button>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center" @click="copyDCloud('2413024177')">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
							<view class="tn-icon-phone-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">技术支持(微信)</view>
						<view
							class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">
							2413024177</view>
					</view>
				</tn-list-cell>
				<!-- 				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center" @click="show">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
							<view class="tn-icon-safe-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
						<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
					</view>
				</tn-list-cell> -->
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center" @click="outlogins">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
							<view class="tn-icon-safe-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">退出登录</view>
						<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
					</view>
				</tn-list-cell>
			</view>
		</view>
		<view class="tn-padding-xl"></view>
		<!-- 回到首页悬浮按钮-->
		<nav-index-button></nav-index-button>
		<tn-landscape :show="show_A" :closeBtn="closeBtn" :closeColor="closeColor" :closeSize="closeSize"
			:closePosition="closePosition" :closeTop="closeTop" :closeRight="closeRight" :closeBottom="closeBottom"
			:closeLeft="closeLeft" :mask="mask" :maskCloseable="maskCloseable" @close="closeLandscape">
			<image src="https://emoji-1257305355.cos.ap-nanjing.myqcloud.com/WechatIMG243.jpeg" mode="widthFix"></image>
		</tn-landscape>
		<wx-user-info-modal v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wx-user-info-modal>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="请输入兑换码" placeholder="请输入兑换码"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
	import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
	// import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
	export default {
		name: 'about-demo-1',
		// mixins: [template_page_mixin],
		components: {
			NavIndexButton,
			dynamicDemoTemplate,
			WxUserInfoModal
		},
		props: {
			number: [String, Number],
		},
		watch: {
			number(e) {
				console.log(e);
				this.userInfo()
			}
		},
		data() {
			return {
				user: {},
				show_A: false,
				closeBtn: false,
				closeColor: '',
				closeSize: 0,
				closePosition: 'rightTop',
				closeTop: 0,
				closeRight: 0,
				closeBottom: 0,
				closeLeft: 0,
				mask: true,
				maskCloseable: true,
				showAuthorizationModal: false,
				header: '',
			}
		},

		created() {
			this.userInfo()
		},
		methods: {
			dialogInputConfirm(e) {
				this.$http.redeemMember({
					code: e
				}).then((res) => {
					if (res.code == 0) {
						this.userInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			inputDialog() {
				this.$refs.inputDialog.open()
			},
			outlogins() {
				uni.showToast({
					title: "退出成功",
					icon: 'none'
				});
				setTimeout(() => {
					uni.removeStorageSync('user_token');
					uni.reLaunch({
						url: `/pages/login/index`
					})
				}, 1000)

			},
			userInfo() {
				this.$http.user({
					action: 'checkToken'
				}).then((res) => {
					uni.setStorageSync("user", res);
					this.user = res
				})
			},
			// 打开获取用户信息弹框
			openAuthorizationModal() {
				if (!this.user.nickname) {
					this.showAuthorizationModal = true
				}
			},

			// 获取到的用户信息
			async updatedUserInfoEvent(info) {
				const result = await uniCloud.uploadFile({
					filePath: info.avatar,
					cloudPath: 'a.jpg',
					onUploadProgress: function(progressEvent) {
						var percentCompleted = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						);
					}
				});
				this.$http.user({
					action: 'setAvatar',
					params: {
						avatar: result.filePath,
						nickname: info.nickname
					},
				}).then((res) => {
					this.showAuthorizationModal = false
					this.userInfo()
				})
				console.log(result.filePath);
				console.log('获取到的用户信息', info)
			},
			// 打开压屏窗
			openLandscape() {
				this.show_A = true
			},
			// 关闭压屏窗
			closeLandscape() {
				this.show_A = false
			},
			copyDCloud(e) {
				uni.setClipboardData({
					data: e,
				})
			},
			show() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			},
			tn(e) {
				uni.navigateTo({
					url: e
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	.template-about {}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */

	/* 波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		z-index: 9999;
		height: 200rpx;
		left: 0;
		right: 0;
		top: 290rpx;
		bottom: auto;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.4;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.6;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.95;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}

	/* 波浪*/

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			// margin: 20rpx 30rpx;
			margin-top: -330rpx;
		}
	}

	/* 页面 end*/

	/* 用户信息 start */
	.user-info {
		&__container {}

		&__avatar {
			width: 170rpx;
			height: 170rpx;
			border: 8rpx solid rgba(255, 255, 255, 0.05);
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		}

		&__nick-name {
			margin-top: 26rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
	}

	/* 用户信息 end */
	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon20 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器12 start */
	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 15rpx;
				height: 15rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 38rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;

				}
			}
		}
	}

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}
</style>
